// 路由配置，登录守卫

// 引入 createRouter（创建路由器） 和 createWebHistory（HTML5 路由模式）
import { createRouter, createWebHistory } from 'vue-router';

// 引入登录状态的 Pinia Store
import { useAuthStore } from '../store/auth';

// 定义异步组件加载函数（Vue 3 语法）
function lazyLoad(view) {
    return () => import(`../views/${view}.vue`);
}

// 路由表定义，每个对象代表一个路由页面
const routes = [
    {
        path: '/:pathMatch(.*)*', // ✅ 通配所有未匹配的路径
        component: lazyLoad('NotFound'),
        meta: {
            requiresAuth: false, // 404 页面不需要登录
            title: '页面未找到'
        }
    },
    {
        path: '/login', // 当地址栏是 /login 时跳转到登录页
        component: lazyLoad('Login'),
        meta: {
            requiresAuth: false, // ✅ 不需要登录
            title: '用户登录',
            layout: 'auth'
        }
    },
    {
        path: '/register',
        component: lazyLoad('Register'),
        meta: {
            requiresAuth: false, // ✅ 不需要登录
            title: '用户注册',
            layout: 'auth'
        }
    },
    {
        path: '/resetPassword',
        component: lazyLoad('ResetPassword'),
        meta: {
            requiresAuth: false, // ✅ 不需要登录
            title: '重置密码',
            layout: 'auth'
        }
    },
    {
        path: '/profile',
        component: lazyLoad('ProfilePage'),
        meta: {
            requiresAuth: true, // ✅ 需要登录才能访问
            title: '个人资料',
            permissions: ['user']
        }
    },
    {
        path: '/',
        component: lazyLoad('Transactions'),
        meta: {
            requiresAuth: true, // ✅ 需要登录才能访问
            title: '账单列表',
            permissions: ['user']
        }
    },
    {
        path: '/categories',
        component: lazyLoad('CategoryManager'),
        meta: {
            requiresAuth: true,
            title: '分类管理',
            permissions: ['user']
        }
    },
    {
        path: '/charts',
        component: lazyLoad('ChartsPage'),
        meta: {
            requiresAuth: true,
            title: '图表分析',
            permissions: ['user']
        }
    },
    {
        path: '/trafficStats',
        component: lazyLoad('TrafficStats'),
        meta: {
            requiresAuth: true, // ✅ 需要登录才能访问
            title: '流量统计',
            permissions: ['user']
        }
    },
    {
        path: '/portFlowChart',
        component: lazyLoad('PortFlowChart'),
        meta: {
            requiresAuth: true, // ✅ 需要登录才能访问
            title: '端口流量统计',
            permissions: ['user']
        }
    }
];

// 创建路由实例（采用 history 模式，路径更好看）
const router = createRouter({
    history: createWebHistory(),
    routes
});

// 设置全局前置守卫，做权限控制
router.beforeEach(async (to, from, next) => {
    // 设置页面标题
    if (to.meta.title) {
        document.title = to.meta.title;
    }

    const auth = useAuthStore(); // 获取当前登录状态
    const requiresAuth = to.meta.requiresAuth === true; // 看当前页面是否需要登录

    // 如果页面不需要登录，直接放行
    if (!requiresAuth) {
        return next();
    }

    // 如果需要登录但没有token
    if (!auth.token) {
        return next({
            path: '/login',
            query: { redirect: to.fullPath }
        });
    }

    // 如果需要特定权限
    if (to.meta.permissions) {
        // 这里可以实现更复杂的权限验证逻辑
        // 例如：const hasPermission = await auth.checkPermissions(to.meta.permissions);
        // 暂时简化处理
        const hasPermission = true;
        if (!hasPermission) {
            return next({ path: '/unauthorized' });
        }
    }

    next();
});

// 导出路由实例，供 main.js 中挂载到 app
export default router;
